window.addEventListener("load", function () {
	//配置
	var config = {
		vx: 4, //小球x轴速度,正为右，负为左
		vy: 4, //小球y轴速度
		height: 2, //小球高宽，其实为正方形，所以不宜太大
		width: 2,
		count: 200, //点个数
		color: "C3C3C3", //点颜色
		stroke: "EDEDED", //线条颜色
		dist: 6000, //点吸附距离
		e_dist: 20000, //鼠标吸附加速距离
		max_conn: 10, //点到点最大连接数
	};

	//调用
	CanvasParticle(config);

	// 二维码触发事件
	$(".icon-erweima").addEventListener("mouseover", function () {
		$("#Tcode").style.display = "block";
	});
	$(".icon-erweima").addEventListener("mouseout", function () {
		$("#Tcode").style.display = "none";
	});
	// 介绍区数据
	let data = [
		{ times: 4000, price: 1200, unitPrice: "0.3000" },
		{ times: 8000, price: 2000, unitPrice: "0.2500" },
		{ times: 40000, price: 8000, unitPrice: "0.2000" },
	];
	//    遍历
	data.forEach(function (v) {
		$(".times1").innerHTML += `<span>${v.times}次</span>`;
		$(
			"#price"
		).innerHTML += `<p><span class='fc-red'>￥${v.price}</span>（约${v.unitPrice}元/次），仅限企业实名购买</p>`;
	});
	// 默认显示
	$(".times1 span")[0].classList.add("times-active");
	$("#price p")[0].classList.add("on1");
	// 点击事件
	tab(".times1 span", "times-active", "#price p", "on1");

	$("#times > span").addEventListener("click", function () {
		this.classList.add("times-active");
	});
	// 左侧
	// 第二部分main1 地址
	let apidata = [
		{
			id: "接口地址：",
			adress:
				"https://gitee.com/yang_zi_xin/yzx-code-data/blob/master/html/index.html",
		},
		{
			id: "返回格式：",
			adress: "json",
		},
		{
			id: "请求方式：",
			adress: "http get/post",
		},
		{
			id: "接口备注：",
			adress:
				"http://op.juhe.cn/idcard/query?key=您申请的KEY&idcard=&realname=",
		},
		{
			id: "接口备注：",
			adress: "error_code为0时计费",
		},
	];
	let apiDataHtml = "";
	// 遍历
	apidata.forEach(function (v) {
		apiDataHtml += `<p>
		<span class="fw-b">${v.id}</span>
		<a href="" class='fc-blue'>${v.adress}</a>
		
	</p>`;
	});
	// 渲染
	$("#l1").forEach(function (v) {
		v.innerHTML = apiDataHtml;
	});

	// main1 表格渲染
	// 第一个表格的后台数据
	let table1 = [
		{ id: "idcard", must: "是", type: "string", explain: "身份证号码" },
		{ id: "realname	", must: "是", type: "string", explain: "姓名(UTF-8)" },
		{
			id: "iorderid",
			must: "否",
			type: "int",
			explain: "传1时返回单号，默认不返回单号(建议传入)",
		},
		{
			id: "key",
			must: "是",
			type: "string",
			explain: "在个人中心->我的数据,接口名称上方查看",
		},
	];
	// 遍历
	let html = "";
	table1.forEach(function (v) {
		html += `
		<tr>
			<td>${v.id}</td>
			<td>${v.must}</td>
			<td>${v.type}</td>
			<td>${v.explain}</td>
		</tr>`;
	});
	// 渲染到页面;
	$("#t1").innerHTML = html;

	// 第二个表格的后台数据
	let table2 = [
		{ id: "idcard", must: "是", type: "string", explain: "身份证号码" },
		{ id: "realname	", must: "是", type: "string", explain: "姓名(UTF-8)" },
		{
			id: "iorderid",
			must: "否",
			type: "int",
			explain: "传1时返回单号，默认不返回单号(建议传入)",
		},
		{
			id: "key",
			must: "是",
			type: "string",
			explain: "在个人中心->我的数据,接口名称上方查看",
		},
	];
	// 遍历
	let html1 = "";
	table1.forEach(function (v) {
		html1 += `
		<tr>
			<td>${v.id}</td>
			<td>${v.must}</td>
			<td>${v.type}</td>
			<td>${v.explain}</td>
		</tr>`;
	});
	// 渲染到页面;
	$("#t2").innerHTML = html1;

	// 代码区 渲染
	$("#codecode").forEach(function (v) {
		v.innerHTML = `
	<p>&lt;?php class Emp</p>
	<p>{</p>
	<p>public $name = ""; public $hobbies = "";</p>
	<p>public $birthdate = "";</p>

	<p>}</p>
	<p>$e = new Emp(); $e->name = "sachin";</p>
	<p>$e->hobbies = "sports";</p>
	<p>
		$e->birthdate = date('m/d/Y h:i:s a',"8/5/1974 12:20:03 p");
	</p>
	<p>
		$e->birthdate = date('m/d/Y h:i:s a',strtotime("8/5/1974
		12:20:03"));
	</p>
	<p>echo json_encode($e); ?&gt;</p>`;
	});

	// main2  错误代码参照

	// main3

	// mian4

	// tab交互
	// 绑定
	// 默认显示
	$(".content>div")[0].classList.add("on1");
	tab("#m-left li", "det2-mainactive", ".content>div", "on1");

	// 右侧1
	let rightData1 = [
		{
			img: "../img/sfz-aside1.png",
		},
		{
			img: "../img/sfz-aside1.png",
		},
		{
			img: "../img/sfz-aside1.png",
		},
	];
	// 渲染
	rightData1.forEach(function (v) {
		$(".m1").innerHTML += `<p><img src=${v.img} alt="图片加载不成" /></p>`;
	});

	//右侧2
	let rightData2 = [
		{
			img: "../img/API详情页_48.jpg",
			id: "短信API服务",
			introuduce: "三网合一短信通道，研制...",
		},
		{
			img: "../img/API详情页_48.jpg",
			id: "短信API服务",
			introuduce: "三网合一短信通道，研制...",
		},
		{
			img: "../img/API详情页_48.jpg",
			id: "短信API服务",
			introuduce: "三网合一短信通道，研制...",
		},
		{
			img: "../img/API详情页_48.jpg",
			id: "短信API服务",
			introuduce: "三网合一短信通道，研制...",
		},
		{
			img: "../img/API详情页_48.jpg",
			id: "短信API服务",
			introuduce: "三网合一短信通道，研制...",
		},
	];
	// 渲染
	// 遍历
	rightData2.forEach(function (v) {
		$(".m2").innerHTML += `<div class="fe flex-sb ">
		<p><img src=${v.img} alt="图片加载不成" /></p>
		<div>
			<h4>${v.id}</h4>
			<p class="fz-10">${v.introuduce}</p>
		</div>
	</div>`;
	});
});
